<template>
  <div class="global-topList">
    <div class="top_wrap pt-16 pb-16 borderB-2">
      <span class="mr-8">厂商编号</span>
      <el-select
        class="mr-8 update-el-select"
        placeholder="请选择"
        clearable
        v-model="params.manufacturerNo"
        @change="handleManufacturer"
      >
        <el-option
          v-for="(item, _index) in manufacturer"
          :key="_index"
          :label="item.no + ' ' + item.name"
          :value="_index"
        >
        </el-option>
      </el-select>
      <span class="mr-8">序号</span>
      <el-input
        class="update-input mr-8"
        placeholder="请输入序号"
        clearable
        @input="onInput"
        v-model="params.sequence"
      ></el-input>
      <span class="mr-8">单据类型</span>
      <el-select
        class="mr-8 update-el-select"
        placeholder="请选择"
        clearable
        v-model="params.type"
      >
        <el-option
          v-for="item in billsTypeList"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <span class="mr-8">日期</span>
      <el-date-picker
        class="mr-8 update-el-datetimerange"
        type="daterange"
        value-format="yyyy-MM-dd"
        v-model="value"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="onChangeDate"
      >
      </el-date-picker>
    </div>
    <div class="bottom_wrap pt-16">
      <div class="btn_wrap">
        <el-button type="primary" icon="el-icon-plus" @click="hanldeAdd"
          >新建</el-button
        >
        <el-button icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button icon="el-icon-edit-outline" @click="handleEditor"
          >编辑</el-button
        >
        <el-button icon="el-icon-refresh-right" @click="hanldeRefresh"
          >数据重置</el-button
        >
        <el-button icon="el-icon-delete" @click="hanldeDelete">删除</el-button>
      </div>
      <div class="table_wrap pt-16">
        <el-table
          :data="manufacturerList"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
          highlight-current-row
          border
          style="width: 100%"
          @cell-click="handleRowClick"
          height="68vh"
        >
          <el-table-column prop="sequence" label="单号"> </el-table-column>
          <el-table-column prop="type" label="类型">
            <template slot-scope="scope">
              <span>{{ scope.row | vendorType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="manufacturerName" label="厂商">
            <template slot-scope="scope">
              <span
                >{{ scope.row.manufacturerNo }}
                {{ scope.row.manufacturerName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="sequenceTime" label="日期">
            <template slot-scope="scope">
              <span>{{ scope.row | formatTime('sequenceTime') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="styleNumber" label="款号"> </el-table-column>
          <el-table-column prop="manufacturerPrice" label="厂价">
          </el-table-column>
          <el-table-column prop="number" label="数量"> </el-table-column>
          <el-table-column prop="money" label="金额"> </el-table-column>
          <el-table-column prop="accountPayable" label="应付款">
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 新增 -->
    <newAdd
      v-if="newAddStatus"
      :rowData="rowData"
      @hanldeCloseClerk="hanldeCloseClerk"
    ></newAdd>
  </div>
</template>

<script>
import { getManufacturer } from '../../../network/manufacturer'
import {
  getManufacturerList,
  getManufacturerRefreshList,
  addManufacturer,
  updateMoney,
  deleteRecord
} from '@/request/input/K_VendorPaymentDetail'

import newAdd from './childComp/newAdd.vue'
import { getCurrentMonthFirst, getCurrentMonthLast } from '@/util/util'
export default {
  name: 'vendor_payment_detail',
  components: { newAdd },
  data() {
    return {
      // 单据类型
      billsTypeList: [
        {
          value: 1,
          label: '厂进'
        },
        {
          value: 2,
          label: '厂退'
        },
        {
          value: 3,
          label: '厂商付款'
        }
      ],
      // 厂商编号
      manufacturer: [],
      params: {
        sequence: '', // 单据序号
        type: null, // 单据类型
        manufacturerName: '', //厂商名称
        manufacturerNo: '', // 厂商编号
        startTime: '',
        endTime: ''
      },
      startTime: '',
      endTime: '',
      value: '',
      page: 1,
      limit: 10,
      total: 1,
      rowData: {},
      manufacturerList: [],
      newAddStatus: false // 新增状态
    }
  },
  created() {
    // this.getCurrentMonthFirst()
    // this.getCurrentMonthLast()
    this.getManufacturer()
    this.params.startTime = getCurrentMonthFirst()
    this.params.endTime = getCurrentMonthLast()
  },
  methods: {
    // 厂商编号
    async getManufacturer() {
      const { data } = await getManufacturer()
      if (data && data.code === 200) {
        this.manufacturer = data.data
        // console.log(this.manufacturer)
      }
    },
    // 查询
    async getManufacturerList(params) {
      console.log(params, 'params')
      const { data } = await getManufacturerList(params)
      if (data && data.code === 200) {
        this.manufacturerList = data.data.list
        this.total = data.total
        // console.log(data)
      }
    },
    // 新增
    hanldeAdd() {
      this.newAddStatus = !this.newAddStatus
    },
    // 查询
    handleSearch() {
      this.getManufacturerList(this.params)
    },
    // 编辑
    handleEditor() {
      if (this.rowData == undefined)
        return this.$message.error('请先选择要编辑的数据')
      if (this.rowData.type !== 3)
        return this.$message.error('只能编辑付款记录')
      this.newAddStatus = true
      // console.log(this.rowData)
    },
    // 刷新
    hanldeRefresh() {
      this.$confirm('此刷新操作可能耗时较长，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (!this.params.manufacturerNo)
            return this.$message.error('请先选择厂商编号')
          const { data } = await getManufacturerRefreshList({
            manufacturerNo: this.params.manufacturerNo
          })
          // console.log(data)
          if (data && data.code === 200) {
            this.$message.success(data.msg)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 删除
    hanldeDelete() {
      let rowData = JSON.stringify(this.rowData)
      if (rowData == '{}') return this.$message.error('请先选择要删除的数据')
      this.$confirm(`是否删除 ${this.rowData.sequence} 单号的数据`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data } = await deleteRecord({ id: this.rowData.id })
          if (data && data.code === 200) {
            this.$message.success(data.msg)
            this.getManufacturerList(this.params)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 选择当前行
    handleRowClick(row) {
      this.rowData = row
    },
    // 选择厂商编号
    handleManufacturer(_index) {
      this.params.manufacturerName = this.manufacturer[_index].name
      this.params.manufacturerNo = this.manufacturer[_index].no
    },
    onChangeDate(e) {
      if (e == null) return
      this.params.startTime = `${e[0]} 00:00:00`
      this.params.endTime = `${e[1]} 23:59:59`
      // console.log(this.params)
    },
    // getCurrentMonthFirst() {
    //   let date = new Date()
    //   date.setDate(1)
    //   let month = parseInt(date.getMonth() + 1)
    //   let day = date.getDate()
    //   let hours = date.getHours()
    //   let minutes = date.getMinutes()
    //   let seconds = date.getSeconds()
    //   if (month < 10) month = '0' + month
    //   if (day < 10) day = '0' + day
    //   // ${00}:${minutes}:${seconds}
    //   this.startTime = `${date.getFullYear()}-${month}-${day} 00:00:00`
    // },
    // getCurrentMonthLast() {
    //   let date = new Date()
    //   let month = parseInt(date.getMonth() + 1)
    //   let day = date.getDate()
    //   let hours = date.getHours()
    //   let minutes = date.getMinutes()
    //   let seconds = date.getSeconds()
    //   if (month < 10) month = '0' + month
    //   if (day < 10) day = '0' + day
    //   // ${hours}:${minutes}:${seconds}
    //   this.endTime = `${date.getFullYear()}-${month}-${day} 23:59:59`
    //   // console.log(this.params.startTime, this.params.endTime)
    // },
    handleSizeChange(val) {
      // console.log(val)
      this.limit = val
      this.params.limit = val
      this.getManufacturerList(this.params)
    },
    handleCurrentChange(val) {
      this.page = val
      this.params.page = val
      this.getManufacturerList(this.params)
    },
    hanldeCloseClerk(e) {
      if (e.status) {
        // 需要调用查询
        this.newAddStatus = false
        this.handleSearch()
        this.rowData = {}
      } else {
        this.newAddStatus = false
        this.rowData = {}
      }
    },
    onInput(val) {
      this.params.sequence = val.toUpperCase()
    },
    getdatatime() {
      // console.log(this.startTime, this.endTime, 'getdatatime')
      this.value = [this.params.startTime, this.params.endTime]
    }
  },
  mounted() {
    console.log('mounted ')
    this.getdatatime()
  }
}
</script>

<style lang="less" scoped>
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  /deep/.el-input__inner {
    width: 100%;
  }
}
</style>
